<template>
  <van-nav-bar :title="$t('two.payDetail')" @click-left="router.back()" />
  <div class="nav flex">
    <span
      @click="
        router.push({
          path: '/draw',
        })
      "
      >{{ t("two.payHistory") }}</span
    >
    <span :class="data.status == 1 ? 'success' : 'fail'">
      {{
        data.status == 0
          ? t("wallet.drawDoing")
          : data.status == 1
          ? t("two.paySucess")
          : t("two.payFail")
      }}</span
    >
  </div>
  <div class="head">
    <div class="money flex">
      <div>
        <div class="money-name">{{ t("two.payvalue") }}</div>
        <div class="money-value">{{ data.money }}</div>
      </div>
    </div>
    <div class="line">
      <div class="card">
        <div class="flex row">
          <span>{{ t("two.userId") }}</span>
          <span>{{ data.userId }}</span>
        </div>
        <div class="flex row">
          <span>{{ t("two.payTime") }}</span>
          <span>{{ data.date }}</span>
        </div>
        <div class="flex row">
          <span>{{ t("two.back") }}</span>
          <span>{{ data.bank }}</span>
        </div>
        <div class="reason">
          <div class="flex reason-title">
            <span>{{
              data.status == 2 ? t("two.ayFailreason") : t("two.suppose")
            }}</span>
            <span @click="viewImage">{{ t("two.view") }}</span>
          </div>
          <div class="reason-img">
            <img v-if="data.image" :src="data.image" class="image" />
            <img src="@/assets/images/none.png" v-else alt="" class="image" />
            <!-- <div v-else class="nodata">{{ t("two.noImag") }}</div> -->
          </div>
          <div class="reason-text">
            {{ data.remark ? data.remark : t("two.text") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { ImagePreview } from "vant";
import Empty from "@/components/Empty";
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
let data = reactive({});
onMounted(async () => {
  console.log(JSON.parse(route.query.item));
  Object.assign(data, JSON.parse(route.query.item));
});
function viewImage() {
  if (!data.image.length) return;
  ImagePreview([data.image]);
}
</script>
<style lang="less" scoped>
.success {
  color: green;
}
.nodata {
  text-align: center;
  padding: 20px;
}
.fail {
  color: red;
}
.nav {
  height: 60px;
  padding: 20px 20px;

  box-sizing: border-box;
}
.image {
  width: 100%;
}
.head {
  box-sizing: border-box;
  width: 100%;
  background-color: #ed008c;
  padding: 40px 13px;
  position: relative;
}
.money {
  padding: 5px 10px;
  &-name {
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }

  &-value {
    margin-top: 12px;
    font-size: 40px;
    line-height: 30px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }
}
.flex {
  display: flex;
  justify-content: space-between;
}
.line {
  width: 100%;
  height: 13px;
  background-color: #971c65;
  border-radius: 7px;
  margin-top: 26px;
  margin-bottom: 15px;
  position: relative;
}
.card {
  width: calc(100% - 30px);
  min-height: 306px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.16);
  position: absolute;
  top: 7px;

  box-sizing: border-box;
  right: 15px;
  padding: 0px 20px;
  padding-bottom: 10px;
}
.row {
  line-height: 12px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
}
.reason {
  width: 100%;
  margin-top: 30px;
  box-sizing: border-box;
  background-color: #f6f6f6;
  border-radius: 10px;
  padding: 9px 20px;
  &-title {
    line-height: 10px;
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #525252;
  }
  &-img {
    margin-top: 9px;
    margin-bottom: 9px;
    width: 100%;
    min-height: 88px;
    background-color: #ffffff;
  }
  &-text {
    line-height: 14px;
    font-family: PingFang-SC-Medium;
    font-size: 9px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #525252;
  }
}
</style>
